import { Badge as AntdBadge, BadgeProps } from 'antd';

/**
 * 导出徽标数组件
 * @param {BadgeProps} props - 徽标数组件的属性
 * @param {React.ReactNode} props.children - 子组件
 * @param {React.ReactNode} props.count - 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏
 * @param {boolean} props.dot - 不展示数字，只有一个小红点
 * @param {number} props.offset - 设置状态点的位置偏移
 * @param {number} props.overflowCount - 展示封顶的数字值
 * @param {boolean} props.showZero - 当数值为 0 时，是否展示 Badge
 * @param {'success' | 'processing' | 'default' | 'error' | 'warning'} props.status - 设置 Badge 为状态点
 * @param {string} props.text - 在设置了 status 的前提下有效，设置状态点的文本
 * @param {string} props.title - 设置鼠标放在状态点上时显示的文字
 * @param {React.CSSProperties} props.style - 自定义样式
 * @returns {JSX.Element} 徽标数组件的 JSX 元素
 * @description 徽标数组件是 Ant Design 提供的徽标数组件，用于在右上角展示消息数量等。
 * @example
 * <Badge count={5}>
 *   <Avatar shape="square" size="large" />
 * </Badge>
 * @example
 * <Badge count={109} overflowCount={99}>
 *   <Avatar shape="square" size="large" />
 * </Badge>
 * @example
 * <Badge dot>
 *   <Icon type="notification" />
 * </Badge>
 * @example
 * <Badge status="success" text="Success" />
 * @example
 * const { Ribbon } = Badge;
 * <Badge.Ribbon text="Hippies">
 *   <Card title="Pushes open the window" size="small">
 *     and raises the spyglass.
 *   </Card>
 * </Badge.Ribbon>
 */
const BadgeComponent = (props: BadgeProps) => {
  return <AntdBadge {...props} />;
};

// 将 Ribbon 作为 Badge 的属性
BadgeComponent.Ribbon = AntdBadge.Ribbon;

export const Badge = BadgeComponent;

// 单独导出 Ribbon 以保持向后兼容
export const { Ribbon } = AntdBadge;

// 默认导出
export default Badge;

// 重新导出类型
export type { BadgeProps };
// 导出 Ribbon 相关类型
export type { RibbonProps } from 'antd/es/badge/Ribbon';
